


<script setup>
import { ref, reactive } from "vue";
const todos = ref(
    [
        { 
            name: 'Foo',
            isComplete: true 
        }, 
        { 
            name: 'Bar',
            isComplete: false
        }
    ]
)
</script>

<template>
    <!--
    这会抛出一个错误，因为属性 todo 此时
    没有在该实例上定义
    -->
    <!-- <li v-for="todo in todos" v-if="!todo.isComplete" :key="todo.name">
    {{ todo.name }}
    </li> -->
    <template v-for="todo in todos" :key="todo.name">
        <li v-if="!todo.isComplete" >
            {{ todo.name }}
        </li>
    </template>
</template>